<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">

    <h1>列表遍历方式一</h1>
    <!--    key绑定的值不允许重复，这里绑定列表中元素id
            item代表列表中的元素-->
    <ul>
        <li v-for="item in person" :key="item.id">
            {{item.name}}---{{item.age}}---{{item.address}}
        </li>
    </ul>

    <h1>列表遍历方式二</h1>
<!--    key绑定的值不允许重复，这里绑定列表序号
        item代表列表中的元素，index代表列表中的序号-->
    <ul>
        <li v-for="(item,index) in person" :key="index">
            {{item.name}}---{{item.age}}---{{item.address}}
        </li>
    </ul>

    <h1>对象遍历</h1>
    <ul>
        <li v-for="(value,key) in zhangsan" :key="key">
            {{key}}---{{value}}
        </li>
    </ul>

    <h2>字符串遍历</h2>
    <ul>
        <li v-for="(value,index) in 'abc'" :key="index">
            {{index}}---{{value}}
        </li>
    </ul>

     <h1>遍历指定次数</h1>
    <ul v-for="(n,index) in 5" :key="index">
        <li>{{index}}---{{n}}</li>
    </ul>


</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data:{
            person:[
               {
                   name:'张三',
                   age:18,
                   address:'上海市'
               },
               {
                   name:'李四',
                   age:19,
                   address:'北京市'
               },
               {
                   name:'王五',
                   age:20,
                   address:'天津市'
               }
            ],
            zhangsan:{
                name:'张三',
                age:18,
                address:'上海市'
            }
        },
        computed:{

        },
        methods:{

        }
    })
</script>
</html>
